<!DOCTYPE html>
<html lang="zh-Hans-CN">
<head>
    <meta http-equiv="content-type" content="textml" charset="utf-8">
    <title>组合排版</title>
    <meta name="Keywords" content="作业, meter">
    <meta name="Description" content="meter">
    <link rel="stylesheet" media="screen" href="css/clean.css">
    <link rel="stylesheet" media="screen" href="css/header.css">
    <link rel="stylesheet" media="screen" href="css/content.css">
</head>
<body>
    <header>
        <div class='header-area'>
            <ul class='header-width-set'>
                <li>
                    <div class='tips'></div>
                    <span>主题: meter</span>
                </li>
                <li>
                    <div class='tips'></div>
                    <span>邮箱: socovo@live.com</span>
                </li>
                <li>
                    <div class='tips'></div>
                    <span>姓名: 宋臣</span>
                </li>
            </ul>
        </div>
    </header>
    <content class='content-area'>
        <aside class='aside-top'>
            <h1><a style='color:black;' href='http://www.dota2.com.cn/hero/luna/'>露娜</a></h1>
            <p>敏捷 远程</p>
            <p>操作难度: 低</p>
            <div class='bg-img'></div>
        </aside>
        <aside class='aside-bottom'>
            <ul>
                <li onclick='window.open("https://www.dota2.com/")'>HOMEPAGE | 游戏主页</li>
                <li onclick='window.open("https://store.steampowered.com/about/")'>DOWNLOADS | 游戏下载</li>
                <li onclick='window.open("http://www.dota2.com.cn/raiders/newer/20131203/154428.shtml")'>RAIDERS | 玩法攻略</li>
                <li onclick='window.open("http://dota2.178.com/list/156385041139.html")'>VIDEOS | 视频教程</li>
            </ul>
        </aside>
        <article>
            <h3>英雄简介</h3>
            <strong><a href='#'>远程</a> <a href='#'>核心</a> <a href='#'>爆发</a> <a href='#'>推进</a></a>
            <p class='introduce'>露娜参战的速度往往飞快, 她弹力十足的攻击可以将敌人粉碎. 一旦陷入险境, 她可以互换月相之力, 洒下一道辉光或是一阵猛烈的月蚀, 碾压顽抗的敌人.</p>
            <div class='value-set'>
                <ul class='attributes-list'><span class='att-title'>满级属性</span>
                    <li>
                        力量<meter class='meter-set' min='0' low='65' high='90' max='100' value='69'></meter>
                    </li>
                    <li>
                        敏捷<meter class='meter-set' min='0' low='65' high='90' max='120' value='97'></meter>
                    </li>
                    <li>
                        智力<meter class='meter-set' min='0' low='65' high='90' max='100' value='60'></meter>
                    </li>
                    <li>
                        移速<meter class='meter-set' min='0' low='290' high='350' max='470' value='330'></meter>
                    </li>
                </ul>
            </div>
        </article>
    </content>
    <footer></footer>
</body>
</html>